<template>
	<view class="change-info">
		<u-form :model="form" ref="uForm" :error-type="['toast']">
			<view class="content">
				<view class="content-title">
					营业执照信息
				</view>
				<view class="img-upload">
					<view class="img-upload-item">
						<view class="title">
							<view class="top">
								营业执照
							</view>
							<view class="bottom">
								请上传营业执照
							</view>
						</view>
						<view class="box-image" @click="chooseImg('BUSINESS_LICENCE')">
							<u-form-item prop="businessLicenceUrl">
								<image class="bg-image"
									:src="businessLicenceUrlShow ? businessLicenceUrlShow : require('@/common/images/identification/img-business.png')"
									mode="aspectFill"></image>
							</u-form-item>
							<view class="add">+</view>
							<view class="bottom">
								点击上传营业执照图片
							</view>
						</view>
					</view>
				</view>
				<view class="form">
					<view class="item">
						<text class="text">营业执照号</text>
						<u-form-item prop="licenseNo">
							<input class="input" placeholder="请输入营业执照号" v-model="form.licenseNo" type="text" />
						</u-form-item>
					</view>
					<view class="item">
						<text class="text">营业执照名称</text>
						<u-form-item prop="licenseName">
							<input class="input" placeholder="请输入营业执照名称" v-model="form.licenseName" type="text" />
						</u-form-item>
					</view>
					<view class="item">
						<text class="text">有效期<text class="long-term"
								@click="longTermSelect('licenseDtEnd')">{{islicenseDtEndLongTerm?'自选日期':'长期有效'}}</text></text>
						<view class="input">
							<u-form-item prop="licenseDtStart">
								<picker class="input" mode="date" fields="day" :value="form.licenseDtStart"
									@change="pickerConfirmHandle($event, 'licenseDtStart')">
									<view class="uni-input">{{ form.licenseDtStart ? form.licenseDtStart : '开始日期' }}
									</view>
								</picker>
							</u-form-item>
							<text class="middle-text">至</text>
							<u-form-item prop="licenseDtEnd">
								<view class="input" v-if="islicenseDtEndLongTerm">长期有效</view>
								<picker class="input" mode="date" fields="day" :value="form.licenseDtEnd"
									@change="pickerConfirmHandle($event, 'licenseDtEnd')" v-else>
									<view class="uni-input">{{ form.licenseDtEnd ? form.licenseDtEnd : '结束日期' }}</view>
								</picker>
							</u-form-item>
						</view>
					</view>
					<!-- <view class="item">
					<text class="text">有效期开始日期</text>
					<picker class="input" mode="date" fields="day" :value="form.licenseDtStart"
						@change="pickerConfirmHandle($event, 'licenseDtStart')">
						<view class="uni-input">{{ form.licenseDtStart ? form.licenseDtStart : '请选择' }}</view>
					</picker>
				</view>
				<view class="item">
					<text class="text">有效期结束日期</text>
					<picker class="input" mode="date" fields="day" :value="form.licenseDtEnd"
						@change="pickerConfirmHandle($event, 'licenseDtEnd')">
						<view class="uni-input">{{ form.licenseDtEnd ? form.licenseDtEnd : '请选择' }}</view>
					</picker>
				</view> -->
					<!-- <view class="item">
					<text class="text">营业执照有效期<text class="long-term" @click="longTermSelect('idCardValidityStart')">长期有效</text></text>
					<picker class="input" mode="date" fields="day" :value="form.idCardValidityStart"
						@change="pickerConfirmHandle($event, 1)">
						<view class="uni-input">{{ form.idCardValidityStart ? form.idCardValidityStart : '请选择' }}</view>
					</picker>
				</view> -->
				</view>
			</view>
			<view class="content">
				<view class="content-title">
					法人信息
				</view>
				<view class="img-upload">
					<view class="img-upload-item">
						<view class="title">
							<view class="top">
								身份证人像面
							</view>
							<view class="bottom">
								请上传法定代表人
							</view>
						</view>
						<view class="box-image" @click="chooseImg('ID_CARD_FRONT')">
							<u-form-item prop="idCardFrontUrl">
								<image class="bg-image"
									:src="idCardFrontUrlShow ? idCardFrontUrlShow : require('@/common/images/identification/img-id-photo-png.png')"
									mode="aspectFill"></image>
							</u-form-item>
							<view class="add">+</view>
							<view class="bottom">
								点击上传身份证人像面图片
							</view>
						</view>
					</view>
					<view class="img-upload-item">
						<view class="title">
							<view class="top">
								身份证国徽面
							</view>
							<view class="bottom">
								请上传法定代表人
							</view>
						</view>
						<view class="box-image" @click="chooseImg('ID_CARD_BEHIND')">
							<u-form-item prop="idCardBehindUrl">
								<image class="bg-image"
									:src="idCardBehindUrlShow ? idCardBehindUrlShow : require('@/common/images/identification/img-national-emblem-png.png')"
									mode="aspectFill"></image>
							</u-form-item>
							<view class="add">+</view>
							<view class="bottom">
								点击上传身份证国徽面图片
							</view>
						</view>
					</view>
				</view>
				<view class="form">
					<view class="item">
						<text class="text">法人姓名</text>
						<u-form-item prop="larName">
							<input class="input" placeholder="请输入姓名" v-model="form.larName" type="text" />
						</u-form-item>
					</view>
					<view class="item">
						<text class="text">法人身份证号</text>
						<u-form-item prop="larIdcard">
							<input class="input" placeholder="请输入身份证号" v-model="form.larIdcard" type="text" />
						</u-form-item>
					</view>
					<!-- <view class="item">
					<text class="text">身份证有效期<text class="long-term" @click="longTermSelect('idCardValidityStart')">长期有效</text></text>
					<picker class="input" mode="date" fields="day" :value="form.idCardValidityStart"
						@change="pickerConfirmHandle($event, 1)">
						<view class="uni-input">{{ form.idCardValidityStart ? form.idCardValidityStart : '请选择' }}</view>
					</picker>
				</view> -->
					<view class="item">
						<text class="text">有效期<text class="long-term"
								@click="longTermSelect('larIdCardEnd')">{{islarIdCardEndLongTerm?'自选日期':'长期有效'}}</text></text>
						<view class="input">
							<u-form-item prop="larIdCardStart">
								<picker class="input" mode="date" fields="day" :value="form.larIdCardStart"
									@change="pickerConfirmHandle($event, 'larIdCardStart')">
									<view class="uni-input">{{ form.larIdCardStart ? form.larIdCardStart : '开始日期' }}
									</view>
								</picker>
							</u-form-item>
							<text class="middle-text">至</text>
							<u-form-item prop="larIdCardEnd">
								<view class="input" v-if="islarIdCardEndLongTerm">长期有效</view>
								<picker class="input" mode="date" fields="day" :value="form.larIdCardEnd"
									@change="pickerConfirmHandle($event, 'larIdCardEnd')" v-else>
									<view class="uni-input">{{ form.larIdCardEnd ? form.larIdCardEnd : '结束日期' }}</view>
								</picker>
							</u-form-item>
						</view>
					</view>
					<!-- <view class="item">
					<text class="text">有效期结束日期</text>
					<picker class="input" mode="date" fields="day" :value="form.larIdCardEnd"
						@change="pickerConfirmHandle($event, 'larIdCardEnd')">
						<view class="uni-input">{{ form.larIdCardEnd ? form.larIdCardEnd : '请选择' }}</view>
					</picker>
				</view> -->

				</view>
			</view>

		</u-form>
		<view class="submit" @click="submit">提交</view>
		<w-compress ref="wCompress2" />
	</view>
</template>

<script>
	import uploadImgMixin from '@/mixins/uploadImg';
	import configData from '_c/utils/config.js'
	import store from '@/store'
	import {
		ocr,
		uploadFileApi,
		repairMerch
	} from "@/api/merchantSupplement/index";
	export default {
		mixins: [uploadImgMixin],
		data() {
			return {
				form: {
					larName: "",
					larIdcard: "",
					larIdCardStart: "",
					larIdCardEnd: "",
					licenseDtEnd: "",
					licenseDtStart: "",
				},
				type: 1, //1:修改 2:添加
				businessLicenceUrlShow: "",
				idCardFrontUrlShow: "",
				idCardBehindUrlShow: "",
				islicenseDtEndLongTerm: false,
				islarIdCardEndLongTerm: false,
				rules: {
					larName: [{
						required: true,
						message: '请输入法人姓名',
						trigger: ['blur', 'change']
					}],
					larIdcard: [{
						required: true,
						message: '请正确输入身份证号',
						//身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
						pattern: /(^\d{15}$)|(^\d{17}(\d|X)$)/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						trigger: ['blur', 'change']
					}],
					larIdCardStart: [{
						required: true,
						message: '请输入法人身份证开始期',
						trigger: ['blur', 'change']
					}],
					larIdCardEnd: [{
						required: true,
						message: '请输入法证件过期时间',
						trigger: ['blur', 'change']
					}],
					licenseName: [{
						required: true,
						message: '请输入营业执照名称',
						trigger: ['blur', 'change']
					}],
					licenseNo: [{
						required: true,
						message: '请输入营业执照号码',
						trigger: ['blur', 'change']
					}],
					licenseDtStart: [{
						required: true,
						message: '请输入营业执照开始时间',
						trigger: ['blur', 'change']
					}],
					licenseDtEnd: [{
						required: true,
						message: '请输入营业执照过期时间',
						trigger: ['blur', 'change']
					}],
					businessLicenceUrl: [{
						required: true,
						message: '请选择营业执照',
						trigger: ['blur', 'change']
					}],
					idCardFrontUrl: [{
						required: true,
						message: '请选择法人身份证正面照',
						trigger: ['blur', 'change']
					}],
					idCardBehindUrl: [{
						required: true,
						message: '请选择法人身份证反面照',
						trigger: ['blur', 'change']
					}],
				}
			};
		},
		onLoad(option) {
			this.form.merchNo = option.merchNo;
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getDate(value) {
				if (value == '长期') {
					// return value;
					return '9999-12-31';
				}
				return value.substring(0, 4) + '-' + value.substring(4, 6) + '-' + value.substring(6, 8);
			},
			pickerConfirmHandle(e, type) {
				this.form[type] = e.detail.value;
				console.log("this.form", this.form);
			},
			checkService() {
				const userAgent = navigator.userAgent;
				let sourcechnl;
				if (/(iPhone iPod iPad)/i.test(userAgent)) { // ios设备
					sourcechnl = 2;
				} else if (/Android/i.test(userAgent)) { //安卓设备
					sourcechnl = 1;
				} else if (!/(iPhoneliPodliPad|Android)/i.test(userAgent)) { //PC设备
					sourcechnl = 0;
				}
				return sourcechnl;
			},
			chooseImg(type) {
				// ID_CARD_FRONT身份证正,ID_CARD_BEHIND	身份证反,BUSINESS_LICENCE	营业执照照
				let _this = this;
				this.$selectUpload.chooseImg().then(async res => {
					this.$tip.loading('上传中...');
					let file = res.tempFilePaths[0];
					let ocrInfo = await _this.uploadApiRequest(file, type);
					console.log({
						ocrInfo
					})
					this.$tip.loaded();
					if (ocrInfo.code == 200) {
						switch (type) {
							//身份证正
							case 'ID_CARD_FRONT':
								this.form.idCardFrontUrl = ocrInfo.url;
								this.idCardFrontUrlShow = ocrInfo.showUrl;
								break;
								//身份证反
							case 'ID_CARD_BEHIND':
								this.form.idCardBehindUrl = ocrInfo.url;
								this.idCardBehindUrlShow = ocrInfo.showUrl;
								break;
								//营业执照照
							case 'BUSINESS_LICENCE':
								this.form.businessLicenceUrl = ocrInfo.url;
								this.businessLicenceUrlShow = ocrInfo.showUrl;
								break;
							default:
								break;
						}

					}
				});

			},
			// 长期
			longTermSelect(valueStr) {
				this['is' + valueStr + 'LongTerm'] = !this['is' + valueStr + 'LongTerm'];
				if (!this['is' + valueStr + 'LongTerm']) {
					this.form[valueStr] = "";
					return
				}
				this.form[valueStr] = this.getDate('长期')
			},
			// 提交
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						this.$tip.loading('提交中...');
						let result = await repairMerch(this.form);
						this.$tip.loaded();
						if (result.code === 200) {
							this.$tip.modal({
								// content: result.data.message,
								content: '修改成功',
								showCancel: false
							}).then(res => {
								// this.$nav.goBack();
								this.$nav.switchTab({
									path: '/pages/home/home/index'
								});
								uni.$emit('update');
							})
						}
					} else {
						console.log('验证失败');
					}
				});
				console.log('this.form', this.form)
			},
			// 上传文件
			uploadApiRequest(file, type) {
				let paramData = {
					imgType: type,
					sourcechnl: this.checkService(), //0:PC,1:安卓,2:IOS
					isOcr: false,
					merchNo: this.form.merchNo,
				}
				return new Promise(function(resolve, reject) {
					uni.uploadFile({ //将本地资源上传到开发者服务器
						url: configData.baseUrl + uploadFileApi, //接口地址
						filePath: file, // File对象
						name: 'file', // 这是后端接收文件时的参数名
						header: {
							authorization: `Bearer ${store.getters.token}`
						},
						formData: {
							...paramData, // 其他需要传递的参数
						},
						success: (uploadFileRes) => {
							let data = JSON.parse(uploadFileRes.data).data
							resolve(data);
						},
						fail: (error) => {
							reject(error); // 上传失败的处理
						}
					});
				})

			}
		}
	};
</script>

<style lang="scss">
	.change-info {
		background-color: #ffffff;
		padding: R(30px);

		.content-title {
			border-bottom: #c7c7c7 1px solid;
			padding: R(20px) 0;
			font-weight: bold;
		}
	}

	.img-upload {
		background-color: #ffffff;
		padding: R(30px);
		padding-top: 0;

		.top-tips {
			text-align: left;
			font-size: R(20px);
			color: #C7C7C7;
			padding-top: R(40px);
		}

		.img-upload-item {
			display: flex;
			justify-content: space-between;
			margin: R(30px) 0;

			.title {

				width: 50%;
				color: #1E1E20;
				margin: R(20px) R(30px);
				font-size: R(22px);
				position: relative;

				.top {
					font-weight: bold;
				}
			}

			.title::before {
				content: "";
				position: absolute;
				display: block;
				left: R(-20px);
				width: R(10px);
				height: R(10px);
				background-color: #0d73d1;
				border-radius: R(50%);
				margin-top: R(10px);
			}

			.box-image {
				width: 50%;
				// background-color: #DFDFE8;
				border-radius: R(10px);
				padding: R(35px) R(55px);
				width: R(300px);
				border: 1px dotted #c7c7c7;
				// height: R(250px);
				margin: 0 auto;
				position: relative;

				.bg-image {
					width: R(200px);
					height: R(100px);
				}

				.add {
					width: R(50px);
					height: R(50px);
					background-color: #3BC3FF;
					border-radius: 50%;
					text-align: center;
					font-size: R(50);
					line-height: R(45px);
					color: #ffffff;
					position: absolute;
					top: 50%;
					left: 50%; //居中
					margin-left: R(-30px);
					margin-top: R(-30px);
				}

				.bottom {
					font-size: R(15px);
					color: #C7C7C7;
					margin-top: R(20px);
				}
			}
		}

	}

	.form {
		// margin: R(10px) 0;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20upx;
			font-size: 28upx;
			font-weight: 400;
			color: #262626;
			background: #fff;

			.input {
				display: inline-block;

				.middle-text {
					margin: 0 R(10px);
				}
			}

			.text {
				position: relative;

				.long-term {
					color: saddlebrown;
					border-bottom: 1px saddlebrown solid;
					margin-left: R(10px);
					display: inline-block;
				}
			}

			.text::before {
				content: "*";
				position: absolute;
				display: block;
				left: R(-20px);
				margin-top: R(-5px);
				color: red;
			}

			.input {
				flex: 1;
				text-align: right;
				margin-left: auto;
				font-size: 28upx;
				color: #7d7d7d;
				justify-content: end;
				display: flex;
				align-items: center;
			}

			.icon {
				width: 46upx;
				height: 46upx;
				margin-left: 20upx;
			}

			.sendCode {
				margin-left: 10upx;
			}
		}



	}

	.tips {
		font-size: R(22px);
		color: #A6A6A6;
		margin: R(30px) R(20px);
	}

	.submit {
		margin: 40upx auto 0;
		width: 581upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		// background: $themeColor;
		// border: 1upx solid $themeColor;
		font-size: 30upx;
		font-weight: 400;
		color: #ffffff;
		background-color: #3BC3FF;
		border-radius: R(50px);
	}

	.u-border-bottom:after,
	.u-border-left:after,
	.u-border-right:after,
	.u-border-top-bottom:after,
	.u-border-top:after,
	.u-border:after {
		border: none;
	}
</style>